<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/element-ui/element-ui.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <link href="/static/css/common-component.css" rel="stylesheet"/>
    <link href="/static/css/common-element-plus.css" rel="stylesheet"/>
    <link href="/static/css/common_biz.css" rel="stylesheet"/>

    <title>组件元数据</title>
    <style>
        .el-dialog__body {
            padding: 10px 20px 20px 20px;
        }
    </style>
</head>
<body class="skin-default">
<div id="app" class="qy-view-page-app">
    <el-scrollbar view-class="qy-el-scrollbar-height-p100">
        <div class="qy-view-page-content">

            <!-- 查询条件 -->
            <div id="qy-view-search-bar" class="qy-view-search-bar qy-height-resize">
                <div class="qy-view-search-condition-bar">
                    <el-form :inline="true" :model="searchCondition">
                        <el-form-item label="组件Code">
                            <el-input v-model="searchCondition.code" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="组件名称">
                            <el-input v-model="searchCondition.name" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="组件类型">
                            <el-radio-group v-model="searchCondition.type">
                                <el-radio v-for="option in typeOptions" :label="option.key">{{option.value}}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="分类" v-if="moreConditionFlag">
                            <el-radio-group v-model="searchCondition.category">
                                <el-radio v-for="option in categoryOptions" :label="option.key">{{option.value}}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" link @click="moreConditionFlag = true" v-if="!moreConditionFlag">
                                更多条件
                            </el-button>
                            <el-button type="primary" link @click="moreConditionFlag = false" v-if="moreConditionFlag">
                                收起条件
                            </el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="list_search"><i class="fa fa-search"
                                                                              aria-hidden="true"></i>&nbsp;查询
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>


            <!-- 按钮区 -->
            <div id="qy-view-button-bar" class="qy-view-button-bar qy-height-resize">
                <el-button type="primary" plain
                           size="default"
                           @click="list_add"

                >新增
                </el-button>
                <el-button type="danger" plain
                           size="default"
                           @click="list_delete_batch"

                >删除
                </el-button>
                <el-button type="warning" plain
                           size="default"
                           @click="reloadPage"

                >刷新
                </el-button>
            </div>

            <!-- 数据表格 -->
            <div id="qy-view-data-bar" class="qy-view-data-bar qy-height-resize">
                <jo-el-table :url="tableDataUrl" :ref="joTableRef" :search-param="searchCondition"
                             first-column="checkbox" :page-size="20" :enable-loading="true">
                    <template #default="scope">
                        <el-table :ref="tableRef" :data="scope.data" header-cell-class-name="jo-el-table-header"

                                  :tree-props="{ children: 'children' }"
                                  @sort-change="list_table_sort"
                                  :max-height="tableHeight">
                            <el-table-column type="selection" prop="selection" width="50" fixed="left" label="#"
                                             header-align="center" align="center"></el-table-column>
                            <el-table-column prop="icon" min-width="60" header-align="left" align="left">
                                <template #header="scope"><span title="">图标</span></template>
                                <template #default="scope">
                                    <i class="fa" :class="scope.row.icon"></i>
                                </template>
                            </el-table-column>
                            <el-table-column prop="code" min-width="180" header-align="left" align="left">
                                <template #header="scope"><span title="">组件Code</span></template>
                            </el-table-column>
                            <el-table-column prop="name" min-width="180" header-align="left" align="left">
                                <template #header="scope"><span title="">组件名称</span></template>
                            </el-table-column>
                            <el-table-column prop="type" min-width="180" header-align="left" align="left">
                                <template #header="scope"><span title="">组件类型</span></template>
                                <template #default="scope">
                                    <jo-el-tag :value="scope.row.type" :options="typeOptions"
                                               code-field="key" text-field="value"></jo-el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="category" min-width="180" header-align="left" align="left">
                                <template #header="scope"><span title="">分类</span></template>
                                <template #default="scope">
                                    <jo-el-tag :value="scope.row.category" :options="categoryOptions"
                                               code-field="key" text-field="value"></jo-el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="remark" min-width="180" header-align="left" align="left">
                                <template #header="scope"><span title="">备注</span></template>
                            </el-table-column>
                            <el-table-column prop="dataSequence" min-width="120" header-align="left" align="left"
                                             sortable="custom">
                                <template #header="scope"><span title="">显示顺序</span></template>
                            </el-table-column>
                            <el-table-column prop="createTime" min-width="155" header-align="left" align="left"
                                             sortable="custom">
                                <template #header="scope"><span title="">创建时间</span></template>
                                <template #default="scope">
                                    {{ formatTime(scope.row.createTime) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="118" fixed="right">
                                <template #default="scope">
                                    <el-button type="primary" link
                                               size="default"
                                               @click="list_edit(scope.row)"

                                    >编辑
                                    </el-button>
                                    <el-divider direction="vertical"></el-divider>
                                    <el-button type="danger" link
                                               size="default"
                                               @click="list_delete(scope.row)"

                                    >删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </jo-el-table>
            </div>

        </div>

        <!-- 表单 -->
        <el-dialog v-model="formShow" :title="formTitle" :width="formWidth"
                   :close-on-click-modal="false"
                   :close-on-press-escape="false"
                   :before-close="close_form"
                   :draggable="true">
            <el-tabs v-model="activeFormTab">
                <el-tab-pane label="基本信息" :lazy="true" name="base">
                    <el-form :ref="formRef" :model="formData" label-position="right" :rules="checkRules"
                             :label-width="formLabelWidth">
                        <el-row :gutter="15">
                            <el-col :span="24" v-if="!addFlag">
                                <el-form-item label="主键" prop="id">
                                    <el-input v-model="formData.id" :disabled="editFlag"
                                              placeholder=""></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="组件code" prop="code">
                                    <el-input v-model="formData.code"
                                              placeholder=""></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="组件名称" prop="name">
                                    <el-input v-model="formData.name"
                                              placeholder=""></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="组件类型" prop="type">
                                    <el-radio-group v-model="formData.type"
                                    >
                                        <el-radio v-for="option in typeOptions" :label="option.key">{{option.value}}
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="组件图标" prop="icon">
                                    <el-select v-model="formData.icon"
                                               placeholder=""
                                               popper-class="qy-icon-selected" :filterable="true" :allow-create="true"
                                               :clearable="true">
                                        <template #prefix="scope"><i class="fa" :class="[formData.icon]"></i></template>
                                        <el-option-group v-for="group in joEl_constants_iconOptions"
                                                         :label="group.name">
                                            <el-option v-for="icon in group.icons" :value="icon" :title="icon">
                                                <i class="fa" :class="[icon]"></i>
                                            </el-option>
                                        </el-option-group>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="分类" prop="category">
                                    <el-radio-group v-model="formData.category"
                                    >
                                        <el-radio v-for="option in categoryOptions" :label="option.key">{{option.value}}
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="显示顺序" prop="dataSequence">
                                    <el-input-number v-model="formData.dataSequence"
                                                     placeholder="" :min="0" :max="2147483647" :step="10"
                                                     :controls="false"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-if="!(formData.type!='group')">
                                <el-form-item label="复合组件内容" prop="groupContent">
                                    <el-input type="textarea" v-model="formData.groupContent"
                                              placeholder="" :rows="3" :autosize="true"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="备注" prop="remark">
                                    <el-input v-model="formData.remark"
                                              placeholder=""></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-tab-pane>

                <el-tab-pane label="属性配置" :lazy="true" name="attr">
                    <el-table :data="formData.attrList" header-cell-class-name="jo-el-table-header">
                        <el-table-column type="index" prop="selection" width="50" fixed="left" label="#"
                                         header-align="center" align="center"></el-table-column>
                        <el-table-column prop="attrName" min-width="150" header-align="left" align="left" fixed="left">
                            <template #header="scope"><span title="">属性名</span></template>
                            <template #default="scope">
                                <el-input v-model="scope.row.attrName"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="attrText" min-width="180" header-align="left" align="left">
                            <template #header="scope"><span title="">说明</span></template>
                            <template #default="scope">
                                <el-input v-model="scope.row.attrText"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="attrDataType" min-width="150" header-align="left" align="left">
                            <template #header="scope"><span title="">数据类型</span></template>
                            <template #default="scope">
                                <el-select v-model="scope.row.attrDataType" :multiple="true">
                                    <el-option v-for="op in attrDataTypeOptions" :label="op.value"
                                               :value="op.key"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="attrDefault" min-width="130" header-align="left" align="left">
                            <template #header="scope"><span title="">默认值</span></template>
                            <template #default="scope">
                                <el-input v-model="scope.row.attrDefault"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="supportVueBind" min-width="150" header-align="left" align="left">
                            <template #header="scope"><span title="">支持vue绑定</span></template>
                            <template #default="scope">
                                <el-switch
                                        v-model="scope.row.supportVueBind"
                                        active-value="yes"
                                        inactive-value="no"
                                ></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" min-width="180" header-align="left" align="left">
                            <template #header="scope"><span title="">备注</span></template>
                            <template #default="scope">
                                <el-input v-model="scope.row.remark"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="70" fixed="right">
                            <template #default="scope">
                                <el-button type="danger" link
                                           size="default"
                                           @click="removeComponentAttr(scope.$index)"

                                >删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="text-align: center;padding: 10px">
                        <el-button type="primary" link @click="appendComponentAttr">添加属性配置</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="close_form">关闭</el-button>
                    <el-button type="primary" @click="form_save" v-if="addSaveBtnShow && addFlag">确认</el-button>
                    <el-button type="primary" @click="form_save"
                               v-else-if="updateSaveBtnShow && editFlag">确认</el-button>
                </span>
            </template>
        </el-dialog>


    </el-scrollbar>
</div>


<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--layer-->
<!--<script src="/static/plugin/layer/layer.js"></script>-->
<!--vue-->
<script src="/static/plugin/vue/v3/vue.global.js"></script>
<script src="/static/plugin/element-ui/element-ui.js"></script>
<script src="/static/plugin/element-ui/locale/zh-cn.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-adapt-element-plus.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script src="/static/plugin/jo/jo-page-element-plus.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<script src="/static/js/common_biz.js"></script>
<script type="text/javascript">
    // 代码生成按钮事件定义
    window.TEMP_BTN_FUNCTION = {
        methods: {
            // 自定义按钮栏事件 start
            // 自定义按钮栏事件 end

            // 自定义表格行按钮事件 start
            // 自定义表格行按钮事件 end
        }
    };
</script>
<script type="text/javascript">
    // vue参数, 留着给全局js定制用, 如果有需要定制vue参数, 则覆盖TEMP_VUE_PARAM
    window.TEMP_VUE_PARAM = {};

</script>
<script type="text/javascript">
    // vue应用构造
    const app = Vue.createApp(joEl.buildVueAppParam(window.TEMP_VUE_PARAM || {}, {
        data: function () {
            return {
                // 表格高度
                tableHeight: 'auto',
                // 表单宽度
                formWidth: '60%',
                // 表单项标题宽度
                formLabelWidth: '120px',
                // 是否支持更新保存按钮展示
                updateSaveBtnShow: true,
                // 是否支持新增保存按钮展示
                addSaveBtnShow: true,
                // 查询参数
                searchCondition: {},
                // 表格数据url
                tableDataUrl: '/lowcode/lcpMetaComponent/getPage',
                // 表单详情查询url
                formQueryUrl: '/lowcode/lcpMetaComponent/get',
                // 新增url
                formInsertUrl: '/lowcode/lcpMetaComponent/insert',
                // 修改url
                formUpdateUrl: '/lowcode/lcpMetaComponent/update',
                // 删除url
                deleteUrl: '/lowcode/lcpMetaComponent/delete',
                // 校验规则
                checkRules: {
                    id: [
                        joEl.rules.required('主键不允许为空', 'blur'),
                        joEl.rules.notNaN('主键请输入数字类型', 'blur'),
                    ],
                    code: [
                        joEl.rules.required('组件code不允许为空', 'blur'),
                        joEl.rules.length('组件code内容长度限制为1~32', 'blur', 32),
                    ],
                    name: [
                        joEl.rules.required('组件名称不允许为空', 'blur'),
                        joEl.rules.length('组件名称内容长度限制为1~32', 'blur', 32),
                    ],
                    type: [
                        joEl.rules.required('组件类型不允许为空', 'blur'),
                        joEl.rules.length('组件类型内容长度限制为1~32', 'blur', 32),
                    ],
                    category: [
                        joEl.rules.length('分类内容长度限制为1~32', 'blur', 32),
                        joEl.rules.required('请输入符合要求的内容', 'blur'),
                    ],
                    dataSequence: [
                        joEl.rules.required('数据顺序不允许为空', 'blur'),
                        joEl.rules.notNaN('数据顺序请输入数字类型', 'blur'),
                    ],
                    groupContent: [
                        joEl.rules.length('复合组件内容内容长度限制为1~1024', 'blur', 1024),
                    ],
                    remark: [
                        joEl.rules.length('备注内容长度限制为1~32', 'blur', 32),
                    ],
                },
                // 图标选择数据集
                joEl_constants_iconOptions: joEl.constants.iconOptions,
                // 数据选项: 组件类型
                typeOptions: [
                    {key: 'base', value: '基础组件', styleType: 'primary'},
                    {key: 'group', value: '复合组件', styleType: 'success'},
                ],
                // 数据选项: 分类
                categoryOptions: [
                    {key: 'container', value: '容器组件', styleType: 'primary'},
                    {key: 'form', value: '表单组件', styleType: 'success'},
                    {key: 'other', value: '其他组件', styleType: 'info'},
                    {key: 'layout', value: '布局组件', styleType: 'warning'},
                ],
                // 数据选项: 属性数据类型
                attrDataTypeOptions: [
                    // {key: 'var', value: 'vue变量', styleType: ''},
                    {key: 'string', value: '字符串', styleType: ''},
                    {key: 'number', value: '数字', styleType: ''},
                    {key: 'boolean', value: '布尔', styleType: ''},
                    {key: 'object', value: '对象', styleType: ''},
                    {key: 'array', value: '数组', styleType: ''},
                    {key: 'time', value: '时间', styleType: ''},
                    {key: 'function', value: '方法', styleType: ''},
                ],
                // 表单tab, base/attr
                activeFormTab: 'base',
            }
        }
        , computed: {}
        , methods: {
            // 新增表单数据初始化前的处理
            handle_form_init_data_add(data) {
                // 默认值
                data.type = 'base';
                data.icon = 'fa-bars';
                data.category = 'other';
                data.dataSequence = 100;
                data.attrList = [];
            },
            // 编辑表单数据初始化前的处理
            handle_form_init_data_edit(data) {
                data.attrList = data.attrList || [];
                jo.forEach(data.attrList, function (item) {
                    item.attrDataType = item.attrDataType ? item.attrDataType.split(',') : [];
                });
            },
            // 新增表单提交前数据处理, 表单校验通过后,ajax请求前
            handle_form_data_before_submit_add(data) {
                jo.forEach(data.attrList, function (item) {
                    item.attrDataType = item.attrDataType ? item.attrDataType.join(',') : '';
                });

            },
            // 编辑表单提交前数据处理, 表单校验通过后,ajax请求前
            handle_form_data_before_submit_edit(data) {
                jo.forEach(data.attrList, function (item) {
                    item.attrDataType = item.attrDataType ? item.attrDataType.join(',') : '';
                });
            },
            // 关闭新增表单后的回调
            close_add_form_after() {
                console.info('close_add_form_after')
                // tab归位
                this.activeFormTab = 'base';
            },
            // 关闭编辑表单后的回调
            close_edit_form_after() {
                console.info('close_edit_form_after')
                // tab归位
                this.activeFormTab = 'base';
            },

            // 数据区高度适应
            dataBarResize() {
                var total = 0;
                jo.forEach($('.qy-view-data-bar').siblings('.qy-height-resize'), (item) => {
                    var id = item.id;
                    if (id) {
                        total += jo.getDefVal($('#' + id).outerHeight(true), 0);
                    }
                });
                var boxPadding = $('.qy-view-page-content').outerHeight(true) - $('.qy-view-page-content').height();
                var h = $('.qy-view-page-app').height() - boxPadding - total - jo.getDefVal($('.jo-el-table-page-bar').outerHeight(true));
                console.info('更新数据表格高度: %s -> %s', this.tableHeight, h);
                this.tableHeight = h;
            },
            // 数据区监听
            dataBarResizeListener() {
                // 初始计算
                this.dataBarResize();
                // 监听注册
                var arr = $('.qy-view-data-bar').siblings('.qy-height-resize');
                jo.forEach(arr, (item) => {
                    var id = item.id;
                    if (id) {
                        this.registerElementHeightResize('#' + item.id, this.dataBarResize);
                    } else {
                        console.warn('注册数据区高度监听需要兄弟节点有id属性:', item);
                    }
                });
                // 数据区高度变化
                // this.registerElementHeightResize('#qy-view-data-bar', this.dataBarResize);
            },
            // 删除属性配置
            removeComponentAttr(idx) {
                this.formData.attrList.splice(idx, 1);
            },
            // 添加属性配置
            appendComponentAttr() {
                this.formData.attrList.push({
                    attrName: 'xxx',
                    attrText: 'xxx',
                    attrDefault: '',
                    attrDataType: ['string'],
                    supportVueBind: 'yes',
                    remark: '',
                });
            }
        }
        , mounted() {
            // 数据区大小监听
            this.dataBarResizeListener();
        }
        , setup() {

        }
    }, window.TEMP_BTN_FUNCTION || {}, joEl.VUE_COMMON_VIEW, joEl.VUE_COMMON));
    app.use(ElementPlus, {locale: ElementPlusLocaleZhCn});
    app.use(joEl);

    var appVM = app.mount("#app");
</script>

</body>
</html>
